<!DOCTYPE html>
<html>
<head>
    <!-- 页面meta -->
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>传智健康</title>
    <meta name="description" content="传智健康">
    <meta name="keywords" content="传智健康">
    <meta content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no" name="viewport">
    <!-- 引入样式 -->
    <link rel="stylesheet" href="../plugins/elementui/index.css">
    <link rel="stylesheet" href="../plugins/font-awesome/css/font-awesome.min.css">
    <link rel="stylesheet" href="../css/style.css">
    <style>
        .filter-container{
            display: flex;
        }
        .btn{
            margin-left: 50px;
            position: absolute;
            right: 35px;
            top: 15%;
            z-index: 999;
            background-color: pink;
        }
        .twoBox{
            background-color: transparent;
        }
    </style>
    <script src="../utils/healthback.js"></script>
    <script src="../plugins/echarts/echarts.js"></script>
</head>
<body class="hold-transition">
<div id="app">
    <el-button class="btn" @click="clickMe">Click Me</el-button>
    <transition name="el-zoom-in-center">
        <div v-show="show2" class="transition-box">
            <div class="content-header">
                <h1>会员管理<small>会员档案</small></h1>
                <el-breadcrumb separator-class="el-icon-arrow-right" class="breadcrumb">
                    <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
                    <el-breadcrumb-item>会员管理</el-breadcrumb-item>
                    <el-breadcrumb-item>会员档案</el-breadcrumb-item>
                </el-breadcrumb>
            </div>
            <div class="app-container">
                <div class="box">
                    <div class="filter-container">
                        <div class="block">
                            <span class="demonstration">时间查询</span>
                            <el-date-picker
                                    v-model="value1"
                                    type="daterange"
                                    range-separator="至"
                                    start-placeholder="开始日期"
                                    end-placeholder="结束日期">
                            </el-date-picker>
                        </div>
                        <el-input placeholder="档案号/姓名/手机号" v-model="pagination.queryString" style="width: 200px;margin: 0 15px" class="filter-item"></el-input>
                        <el-button @click="handleCurrentChange(1)" class="dalfBut">查询</el-button>
                        <el-button type="primary" class="butT" @click="handleCreate()">新建</el-button>
                    </div>
                    <div class="excelTitle" >
                        <el-button @click="exportExcel">批量导出Excel</el-button>
                    </div>
                    <el-table @row-dblclick="rowDbClick($event)" size="small" ref="multipleTable" current-row-key="id" :data="dataList"  stripe highlight-current-row @selection-change="changeFun">
                        <el-table-column type="selection" width="55" @selection-change="changeFun"></el-table-column>

                        <el-table-column prop="fileNumber" label="档案号" align="center"></el-table-column>
                        <el-table-column prop="name" label="姓名" align="center"></el-table-column>
                        <el-table-column label="性别" align="center">
                            <template slot-scope="scope">
                                <span>{{ scope.row.sex == '0' ? '不限' : scope.row.sex == '1' ? '男' : '女'}}</span>
                            </template>
                        </el-table-column>
                        <el-table-column prop="age" label="年龄" align="center"></el-table-column>
                        <el-table-column prop="health" label="健康管理师" align="center"></el-table-column>
                        <el-table-column prop="regTime" label="注册时间" align="center"></el-table-column>
                        <el-table-column prop="phoneNumber" label="手机号码" align="center"></el-table-column>
                        <el-table-column label="操作" align="center">
                            <template slot-scope="scope">
                                <el-button type="primary" size="mini" @click="handleUpdate(scope.row)">编辑</el-button>
                                <el-button size="mini" type="danger" @click="handleDelete(scope.row)">删除</el-button>
                            </template>
                        </el-table-column>
                    </el-table>
                    <div class="pagination-container">
                        <el-pagination
                                class="pagiantion"
                                @current-change="handleCurrentChange"
                                :current-page="pagination.currentPage"
                                :page-size="pagination.pageSize"
                                layout="total, prev, pager, next, jumper"
                                :total="pagination.total">
                        </el-pagination>
                    </div>
                    <!-- 新增标签弹层 -->
                    <div class="add-form">
                        <el-dialog title="新增会员" :visible.sync="dialogFormVisible">
                            <el-form ref="dataAddForm" :model="formData" :rules="rules" label-position="right" label-width="100px">
                                <el-row>
                                    <el-col :span="12">
                                        <el-form-item label="姓名" prop="name">
                                            <el-input v-model="formData.name"/>
                                        </el-form-item>
                                    </el-col>
                                    <el-col :span="12">
                                        <el-form-item label="手机号码" prop="phoneNumber">
                                            <el-input @change="checkPhoneNumber" v-model="formData.phoneNumber" maxlength="11"/>
                                        </el-form-item>
                                    </el-col>
                                </el-row>
                                <el-row>
                                    <el-col :span="12">
                                        <el-form-item label="性别">
                                            <el-select v-model="formData.sex">
                                                <el-option label="不限" value="0"></el-option>
                                                <el-option label="男" value="1"></el-option>
                                                <el-option label="女" value="2"></el-option>
                                            </el-select>
                                        </el-form-item>
                                    </el-col>
                                    <el-col :span="11">
                                        <el-form-item label="出生日期">
                                            <el-date-picker type="date"
                                                            placeholder="选择日期"
                                                            v-model="formData.birthday"
                                                            style="width: 100%;">

                                            </el-date-picker>
                                        </el-form-item>
                                    </el-col>
                                </el-row>
                                <el-row>
                                    <el-col :span="12">
                                        <el-form-item label="健康管理师">
                                            <el-select v-model="formData.health" placeholder="请选择">
                                                <el-option
                                                        v-for="item in options"
                                                        :key="item.value"
                                                        :label="item.username"
                                                        :value="item.username">
                                                </el-option>
                                            </el-select>
                                        </el-form-item>
                                    </el-col>
                                    <el-col :span="12">
                                        <el-form-item label="身份证号" prop="idCard">
                                            <el-input @change="checkIdCard" v-model="formData.idCard"/>
                                        </el-form-item>
                                    </el-col>
                                </el-row>
                                <el-row>
                                    <el-col :span="24">
                                        <el-form-item label="档案号">
                                            <el-input v-model="formData.fileNumber" type="textarea"></el-input>
                                        </el-form-item>
                                    </el-col>
                                </el-row>
                                <el-row>
                                    <el-col :span="24">
                                        <el-form-item label="项目说明">
                                            <el-input v-model="formData.remark" type="textarea"></el-input>
                                        </el-form-item>
                                    </el-col>
                                </el-row>
                            </el-form>
                            <div slot="footer" class="dialog-footer">
                                <el-button @click="dialogFormVisible = false">取消</el-button>
                                <el-button type="primary" @click="handleAdd()">确定</el-button>
                            </div>
                        </el-dialog>
                    </div>

                    <!-- 编辑标签弹层 -->
                    <div class="add-form">
                        <el-dialog :title="titleType" :visible.sync="dialogFormVisible4Edit">
                            <el-form ref="dataEditForm" :model="formData" :rules="rules" label-position="right" label-width="100px">
                                <el-row>
                                    <el-col :span="12">
                                        <el-form-item label="姓名" prop="name">
                                            <el-input v-model="formData.name"/>
                                        </el-form-item>
                                    </el-col>
                                    <el-col :span="12">
                                        <el-form-item label="手机号码" prop="phoneNumber">
                                            <el-input @change="checkPhoneNumber" v-model="formData.phoneNumber"/>
                                        </el-form-item>
                                    </el-col>
                                </el-row>
                                <el-row>
                                    <el-col :span="12">
                                        <el-form-item label="性别">
                                            <el-select v-model="formData.sex">
                                                <el-option label="不限" value="0"></el-option>
                                                <el-option label="男" value="1"></el-option>
                                                <el-option label="女" value="2"></el-option>
                                            </el-select>
                                        </el-form-item>
                                    </el-col>
                                    <el-col :span="11">
                                        <el-form-item label="出生日期">
                                            <el-date-picker type="date"
                                                            placeholder="选择日期"
                                                            v-model="formData.birthday"
                                                            style="width: 100%;">

                                            </el-date-picker>
                                        </el-form-item>
                                    </el-col>
                                </el-row>
                                <el-row>
                                    <el-col :span="12">
                                        <el-form-item label="健康管理师">
                                            <el-select v-model="formData.health" placeholder="请选择">
                                                <el-option
                                                        v-for="item in options"
                                                        :label="item.username"
                                                        :value="item.username">
                                                </el-option>
                                            </el-select>
                                        </el-form-item>
                                    </el-col>
                                    <el-col :span="12">
                                        <el-form-item label="身份证号" prop="idCard">
                                            <el-input @change="checkIdCard" v-model="formData.idCard"/>
                                        </el-form-item>
                                    </el-col>
                                </el-row>
                                <el-row>
                                    <el-col :span="24">
                                        <el-form-item label="档案号">
                                            <el-input v-model="formData.fileNumber" type="textarea"></el-input>
                                        </el-form-item>
                                    </el-col>
                                </el-row>
                                <el-row>
                                    <el-col :span="24">
                                        <el-form-item label="项目说明">
                                            <el-input v-model="formData.remark" type="textarea"></el-input>
                                        </el-form-item>
                                    </el-col>
                                </el-row>
                            </el-form>
                            <div slot="footer" class="dialog-footer">
                                <el-button @click="dialogFormVisible4Edit = false">取消</el-button>
                                <el-button type="primary" @click="handleEdit()">确定</el-button>
                            </div>
                        </el-dialog>
                    </div>

                    <!-- 查看会员-->
                    <div class="add-form">
                        <el-dialog title="会员详情" :visible.sync="lookFormVisible4Edit">
                            <el-form ref="dataEditForm"  :model="formData" :rules="rules" label-position="right" label-width="100px">
                                <el-row>
                                    <el-col :span="12">
                                        <el-form-item label="姓名" prop="name" disabled:true>
                                            <el-input v-model="formData.name"/>
                                        </el-form-item>
                                    </el-col>
                                    <el-col :span="12">
                                        <el-form-item label="手机号码" prop="phoneNumber">
                                            <el-input @change="checkPhoneNumber" v-model="formData.phoneNumber"/>
                                        </el-form-item>
                                    </el-col>
                                </el-row>
                                <el-row>
                                    <el-col :span="12">
                                        <el-form-item label="性别">
                                            <el-select v-model="formData.sex">
                                                <el-option label="不限" value="0"></el-option>
                                                <el-option label="男" value="1"></el-option>
                                                <el-option label="女" value="2"></el-option>
                                            </el-select>
                                        </el-form-item>
                                    </el-col>
                                    <el-col :span="11">
                                        <el-form-item label="出生日期">
                                            <el-date-picker type="date"
                                                            placeholder="选择日期"
                                                            v-model="formData.birthday"
                                                            style="width: 100%;">

                                            </el-date-picker>
                                        </el-form-item>
                                    </el-col>
                                </el-row>
                                <el-row>
                                    <el-col :span="12">
                                        <el-form-item label="健康管理师">
                                            <el-select v-model="formData.health" placeholder="请选择">
                                                <el-option
                                                        v-for="item in options"
                                                        :label="item.username"
                                                        :value="item.username">
                                                </el-option>
                                            </el-select>
                                        </el-form-item>
                                    </el-col>
                                    <el-col :span="12">
                                        <el-form-item label="身份证号" prop="idCard">
                                            <el-input @change="checkIdCard" v-model="formData.idCard"/>
                                        </el-form-item>
                                    </el-col>
                                </el-row>
                                <el-row>
                                    <el-col :span="24">
                                        <el-form-item label="档案号">
                                            <el-input v-model="formData.fileNumber" type="textarea"></el-input>
                                        </el-form-item>
                                    </el-col>
                                </el-row>
                                <el-row>
                                    <el-col :span="24">
                                        <el-form-item label="项目说明">
                                            <el-input v-model="formData.remark" type="textarea"></el-input>
                                        </el-form-item>
                                    </el-col>
                                </el-row>
                            </el-form>
                        </el-dialog>
                    </div>
                </div>
            </div>
        </div>
    </transition>
    <transition name="el-fade-in-linear">
        <div v-show="cutFlag"  class="transition-box twoBox">
            <div class="content-header">
                <h1>会员管理<small>市场分析</small></h1>
                <el-breadcrumb separator-class="el-icon-arrow-right" class="breadcrumb">
                    <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
                    <el-breadcrumb-item>会员管理</el-breadcrumb-item>
                    <el-breadcrumb-item>会员档案</el-breadcrumb-item>
                </el-breadcrumb>
            </div>
            <div class="app-container" style="display: flex;border-top: 3px solid #3c8dbc;padding-top: 30px">
                <div id="main" style="width: 600px;height:480px;"></div>
                <div id="main1" style="width: 600px;height:480px;"></div>
            </div>


        </div>
    </transition>
</div>

</body>
<!-- 引入组件库 -->
<script src="../js/vue.js"></script>
<script src="../plugins/elementui/index.js"></script>
<script type="text/javascript" src="../js/jquery.min.js"></script>
<script src="../js/axios-0.18.0.js"></script>
<script>
    var vue = new Vue({
        el: '#app',
        data:{
            pagination: {//分页相关模型数据
                currentPage: 1,//当前页码
                pageSize:10,//每页显示的记录数
                total:0,//总记录数
                queryString:null//查询条件
            },
            options: [],//加载健康管理师
            dataList: [],//当前页要展示的分页列表数据
            formData: {},//表单数据
            //formData: {},//编辑表单数据
            multipleSelection:[],//复选框
            dialogFormVisible: false,//增加表单是否可见
            dialogFormVisible4Edit:false,//编辑表单是否可见
            rules: {//校验规则
                name: [{ required: true, message: '请输入姓名', trigger: 'blur' },{ min: 2, max: 8, message: '长度在 2 到 8 个字符', trigger: 'blur' }],
                phoneNumber: [{ required: true,message: '请输入手机号',trigger: 'blur'}],
                idCard: [{ required: true,message: '请输入身份证号',trigger: 'blur'}]
            },
            openEdit: false,//一个标志变量,标记为是否打开编辑表单
            formDataChange: false,//一个标志变量,标记编辑表单中的数据是否发生改变
            formDataContain: {},//创建一个容器,用于存储编辑表单的数据回显
            deepCloneObj: {},//创建一个容器,用于深拷贝一份编辑表单数据回显的数据
            titleType:"编辑会员",
            lookFormVisible4Edit:false,// 查看会员弹框
            pickerOptions: {
                shortcuts: [{
                    text: '最近一周',
                    onClick(picker) {
                        const end = new Date();
                        const start = new Date();
                        start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
                        picker.$emit('pick', [start, end]);
                    }
                }, {
                    text: '最近一个月',
                    onClick(picker) {
                        const end = new Date();
                        const start = new Date();
                        start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
                        picker.$emit('pick', [start, end]);
                    }
                }, {
                    text: '最近三个月',
                    onClick(picker) {
                        const end = new Date();
                        const start = new Date();
                        start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
                        picker.$emit('pick', [start, end]);
                    }
                }]
            },
            value1: '',
            value2: '',
            show2: true,
            cutFlag:false
        },
        //钩子函数，VUE对象初始化完成后自动执行
        created() {
            this.findPage();
        },

        methods: {
            // 切换
            clickMe(){
                this.show2 = !this.show2
                this.cutFlag = !this.cutFlag
            },
            //编辑
            handleEdit() {
                //先进行表单校验
                this.$refs['dataEditForm'].validate((valid)=>{
                    if (valid){
                        //表单校验没问题，发送请求
                        axios.post("/member/edit.do",this.formData).then((res)=>{
                            //隐藏页面
                            this.dialogFormVisible4Edit = false;
                            if (res.data.flag){
                                this.$message({
                                    message:res.data.message,
                                    type:'success'
                                });
                            }else{
                                this.$message.error(res.data.message)
                            }
                        }).finally(()=>{
                            //重新查询页面数据
                            this.findPage();
                        });
                    }else {
                        this.$message.error("表单数据校验失败");
                        return false;
                    }
                })
            },

            //手机号校验
            checkPhoneNumber:function(){
                if (!checkTelephone(this.formData.phoneNumber)){
                    this.$message.error("请输入正确的手机号！");
                    return false;
                }
            },

            //身份证校验号
            checkIdCard:function () {
                var idCard =this.formData.idCard;
                if (!submitOrder(idCard)){
                    this.$message.error("身份证号码输入错误，请重新输入");
                    return false;
                }
            },

            //添加
            handleAdd: function () {
                console.log(this.formData);

                //先校验表单数据格式是否都正确
                this.$refs['dataAddForm'].validate((valid)=>{
                    // 为true表示数据都合法
                    if (valid){
                        // 发送异步请求
                        axios.post("/member/add.do",this.formData).then((res)=>{
                            //数据校验合法之后，只要发送了添加请求，不管怎样都要隐藏添加界面
                            this.dialogFormVisible = false;
                            //判断controller响应回来的数据，判断flag，如果为true，表示添加成功，否则添加失败，打印对应的信息
                            if (res.data.flag){
                                this.$message({
                                    message:res.data.message,
                                    type:'success'
                                });
                            }else{
                                // 返回的flag为false，表示数据添加失败，打印错误信息
                                this.$message.error(res.data.message);
                            }
                        }).finally(()=>{
                            // 不管怎样都要重新查询数据
                            this.findPage();
                        });
                    }else{
                        //表单数据校验失败
                        this.$message.error("表单数据校验失败");
                        return false;
                    }
                });
            },
            //条件查询
            findQueryPage(){
                //当前页初始值为第一页
                console.log(this.value1);
                let newArr = [];
                this.value1.map(item=>{
                    newArr.push(this.toTime(item))
                });
                console.log(newArr);
                this.pagination.currentPage = 1;
                this.findPage();
            },

            //复选框状态改变
            changeFun(val) {
                var a=[];
                for (var v of val){
                    a.push(v.id);
                }
                this.multipleSelection=a;
                // this.multipleSelection = JSON.stringify(val).toString();
            },
            //批量导出Excel
            exportExcel(){
                window.location.href='/member/exportMemberOrderReport.do?multiple='+this.multipleSelection;
            },
            //分页查询
            findPage(){
                const param = {
                    currentPage: this.pagination.currentPage,//当前页码
                    pageSize: this.pagination.pageSize,//每页显示的记录数
                    queryString: this.pagination.queryString,//查询条件
                    startTime: this.value1[0],
                    endTime: this.value1[1]

                };
                axios.post("/member/findPage.do",param).then((res)=>{
                    this.pagination.total = res.data.total;
                    this.dataList = res.data.rows;
                })
            },
            // 重置表单
            resetForm() {
                // 重置数据
                this.formData={};
            },
            // 弹出添加窗口
            handleCreate() {
                //显示模态窗口
                this.dialogFormVisible=true;
                //重置表单的数据
                this.resetForm();
                //发送请求，获取健康管理师
                axios.get("/member/findUser.do").then((res) => {
                    this.options = res.data;
                })
            },
            //弹出编辑窗口(模态流)
            // 弹出编辑窗口
            handleUpdate(row) {
                this.dialogFormVisible4Edit=true;
                axios.get("/member/findById.do?id="+row.id).then((res)=>{

                    //发送请求，获取健康管理师
                    axios.get("/member/findUser.do").then((res) => {
                        this.options = res.data;
                    });
                    this.formData = res.data;

                });
            },
            //深拷贝
            deepClone(obj) {
                var target = {};
                for (var key in obj) {
                    if (Object.prototype.hasOwnProperty.call(obj, key)) {
                        if (typeof obj[key] === 'object') {
                            target[key] = this.deepClone(obj[key]);
                        } else {
                            target[key] = obj[key];
                        }
                    }
                }
                return target;
            },
            //切换页码:currentPage为点击的页码
            handleCurrentChange(currentPage) {
                this.pagination.currentPage = currentPage;
                this.findPage();
            },

            // 删除
            handleDelete(row) {
                this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    axios.get("/member/delete.do?id=" + row.id).then((res)=>{
                        if (res.data.flag){
                            this.$message({
                                type: 'success',
                                message: res.data.message
                            });
                            //调用分页，重新查询
                            this.findPage();
                        }else {
                            this.$message.error(res.data.message);
                        }
                    })
                }).catch(() => {
                    this.$message({
                        type: 'info',
                        message: '已取消删除'
                    });
                });
            },
            //判断对象值是否相等
            isObjectValueEqual(x, y) {
                var i, l, leftChain, rightChain;

                function compare2Objects(x, y) {
                    var p;

                    // remember that NaN === NaN returns false
                    // and isNaN(undefined) returns true
                    if (isNaN(x) && isNaN(y) && typeof x === 'number' && typeof y === 'number') {
                        return true;
                    }

                    // Compare primitives and functions.
                    // Check if both arguments link to the same object.
                    // Especially useful on the step where we compare prototypes
                    if (x === y) {
                        return true;
                    }

                    // Works in case when functions are created in constructor.
                    // Comparing dates is a common scenario. Another built-ins?
                    // We can even handle functions passed across iframes
                    if ((typeof x === 'function' && typeof y === 'function') ||
                        (x instanceof Date && y instanceof Date) ||
                        (x instanceof RegExp && y instanceof RegExp) ||
                        (x instanceof String && y instanceof String) ||
                        (x instanceof Number && y instanceof Number)) {
                        return x.toString() === y.toString();
                    }

                    // At last checking prototypes as good as we can
                    if (!(x instanceof Object && y instanceof Object)) {
                        return false;
                    }

                    if (x.isPrototypeOf(y) || y.isPrototypeOf(x)) {
                        return false;
                    }

                    if (x.constructor !== y.constructor) {
                        return false;
                    }

                    if (x.prototype !== y.prototype) {
                        return false;
                    }

                    // Check for infinitive linking loops
                    if (leftChain.indexOf(x) > -1 || rightChain.indexOf(y) > -1) {
                        return false;
                    }

                    // Quick checking of one object being a subset of another.
                    // todo: cache the structure of arguments[0] for performance
                    for (p in y) {
                        if (y.hasOwnProperty(p) !== x.hasOwnProperty(p)) {
                            return false;
                        } else if (typeof y[p] !== typeof x[p]) {
                            return false;
                        }
                    }

                    for (p in x) {
                        if (y.hasOwnProperty(p) !== x.hasOwnProperty(p)) {
                            return false;
                        } else if (typeof y[p] !== typeof x[p]) {
                            return false;
                        }

                        switch (typeof(x[p])) {
                            case 'object':
                            case 'function':

                                leftChain.push(x);
                                rightChain.push(y);

                                if (!compare2Objects(x[p], y[p])) {
                                    return false;
                                }

                                leftChain.pop();
                                rightChain.pop();
                                break;

                            default:
                                if (x[p] !== y[p]) {
                                    return false;
                                }
                                break;
                        }
                    }

                    return true;
                }

                if (arguments.length < 1) {
                    return true; //Die silently? Don't know how to handle such case, please help...
                    // throw "Need two or more arguments to compare";
                }

                for (i = 1, l = arguments.length; i < l; i++) {

                    leftChain = []; //Todo: this can be cached
                    rightChain = [];

                    if (!compare2Objects(arguments[0], arguments[i])) {
                        return false;
                    }
                }

                return true;
            },
            // 双击查看详情
            rowDbClick(column){
                this.lookFormVisible4Edit=true;
                axios.get("/member/findById.do?id="+column.id).then((res)=>{

                    //发送请求，获取健康管理师
                    axios.get("/member/findUser.do").then((res) => {
                        this.options = res.data;
                    });
                    this.formData = res.data;

                });
            },
            // 时间转换函数
            toTime(data){
                let date = new Date(data);
                let  y = date.getFullYear();
                let  m = date.getMonth() + 1;
                m = m < 10 ? ('0' + m) : m;
                let d = date.getDate();
                d = d < 10 ? ('0' + d) : d;
                let h = date.getHours();
                let minute = date.getMinutes();
                minute = minute < 10 ? ('0' + minute) : minute;
                let time = y + '-' + m + '-' + d+' '+h+':'+minute;
                return time
            }
        },
        watch: {
            formData: {
                deep: true,
                handler: function (newVal, oldVal) {
                    if (this.openEdit) {
                        this.openEdit = false;
                        return;
                    }
                    this.formDataChange = !this.isObjectValueEqual(newVal, this.deepCloneObj);
                }
            }
        }
    })
</script>
<script type="text/javascript">
    // 基于准备好的dom，初始化echarts实例
    var myChart = echarts.init(document.getElementById('main'));

    // 指定图表的配置项和数据
    var option = {
        title: {
            text: ''
        },
        tooltip: {},
        legend: {
            data:['销量']
        },
        xAxis: {
            data: ["2012","2013","2014","2015","2016","2017","2018","2019","2020"]
        },
        yAxis: {},
        series: [{
            name: '销量',
            type: 'bar',
            data: [5, 13, 15, 10, 10, 20,16,17,20]
        }]
    };

    // 使用刚指定的配置项和数据显示图表。
    myChart.setOption(option);

</script>
<script>
    let newDataset;
    axios.get("/member/getMemberReport.do").then((res) => {
        newDataset = res.data
        console.log(res)

        var myChart = echarts.init(document.getElementById('main1'));
        setTimeout(function () {
            option = {
                legend: {},
                tooltip: {
                    trigger: 'axis',
                    showContent: true
                },
                dataset: newDataset,

                xAxis: {type: 'category'},
                yAxis: {gridIndex: 0},
                grid: {top: '55%'},
                series: [
                    {type: 'line', smooth: true, seriesLayoutBy: 'row'},
                    {type: 'line', smooth: true, seriesLayoutBy: 'row'},
                    {type: 'line', smooth: true, seriesLayoutBy: 'row'},
                    {type: 'line', smooth: true, seriesLayoutBy: 'row'},
                    {type: 'line', smooth: true, seriesLayoutBy: 'row'},

                    {
                        type: 'pie',
                        id: 'pie',
                        radius: '30%',
                        center: ['50%', '25%'],
                        label: {
                            formatter: '{b}: {@2012} ({d}%)'
                        },
                        encode: {
                            itemName: 'product',
                            value: '2012',
                            tooltip: '2012'
                        }
                    }
                ]
            };
            myChart.on('updateAxisPointer', function (event) {
                var xAxisInfo = event.axesInfo[0];
                if (xAxisInfo) {
                    var dimension = xAxisInfo.value + 1;
                    myChart.setOption({
                        series: {
                            id: 'pie',
                            label: {
                                formatter: '{b}: {@[' + dimension + ']} ({d}%)'
                            },
                            encode: {
                                value: dimension,
                                tooltip: dimension
                            }
                        }
                    });
                }
            });
            myChart.setOption(option);
        })
    });
</script>
<style>
    .transition-box {
        margin-bottom: 10px;
        width: 100%;
        /*height: 100px;*/
        border-radius: 4px;
        /*background-color: #409EFF;*/
        text-align: center;
        box-sizing: border-box;
        margin-right: 20px;
    }
</style>
</html>



<!--<!DOCTYPE html>-->
<!--<html>-->
<!--<head>-->
<!--    &lt;!&ndash; 页面meta &ndash;&gt;-->
<!--    <meta charset="utf-8">-->
<!--    <meta http-equiv="X-UA-Compatible" content="IE=edge">-->
<!--    <title>传智健康</title>-->
<!--    <meta name="description" content="传智健康">-->
<!--    <meta name="keywords" content="传智健康">-->
<!--    <meta content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no" name="viewport">-->
<!--    &lt;!&ndash; 引入样式 &ndash;&gt;-->
<!--    <link rel="stylesheet" href="../plugins/elementui/index.css">-->
<!--    <link rel="stylesheet" href="../plugins/font-awesome/css/font-awesome.min.css">-->
<!--    <link rel="stylesheet" href="../css/style.css">-->
<!--</head>-->
<!--<body class="hold-transition">-->
<!--<div id="app">-->
<!--    <div class="content-header">-->
<!--        <h1>会员管理<small>会员档案</small></h1>-->
<!--        <el-breadcrumb separator-class="el-icon-arrow-right" class="breadcrumb">-->
<!--            <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>-->
<!--            <el-breadcrumb-item>会员管理</el-breadcrumb-item>-->
<!--            <el-breadcrumb-item>会员档案</el-breadcrumb-item>-->
<!--        </el-breadcrumb>-->
<!--    </div>-->
<!--    <div class="app-container">-->
<!--        <div class="box">-->
<!--            <div class="filter-container">-->

<!--                <el-input placeholder="档案号/姓名/手机号" v-model="pagination.queryString" style="width: 200px;" class="filter-item"></el-input>-->
<!--                <el-button @click="findPage()" class="dalfBut">查询</el-button>-->
<!--                <el-button type="primary" class="butT" @click="handleCreate()">新建</el-button>-->
<!--            </div>-->
<!--            <div class="excelTitle">-->
<!--                <el-button @click="exportExcel">批量导出Excel</el-button>-->
<!--            </div>-->

<!--            <el-table @selection-change="handleSelectionChange" ref="multipleTable" size="small" current-row-key="id" :data="dataList" stripe highlight-current-row>-->
<!--                <el-table-column-->
<!--                        type="selection"-->
<!--                        width="55">-->
<!--                </el-table-column>-->
<!--                <el-table-column type="index" align="center" label="序号"></el-table-column>-->
<!--                <el-table-column prop="fileNumber" label="档案号" align="center"></el-table-column>-->
<!--                <el-table-column prop="name" label="姓名" align="center"></el-table-column>-->
<!--                <el-table-column label="性别" align="center">-->
<!--                    <template slot-scope="scope">-->
<!--                        <span>{{ scope.row.sex == '0' ? '不限' : scope.row.sex == '1' ? '男' : '女'}}</span>-->
<!--                    </template>-->
<!--                </el-table-column>-->
<!--                <el-table-column prop="age" label="年龄" align="center"></el-table-column>-->
<!--                <el-table-column prop="health" label="健康管理师" align="center"></el-table-column>-->
<!--                <el-table-column prop="phoneNumber" label="手机号码" align="center"></el-table-column>-->
<!--                <el-table-column prop="regTime" label="注册时间" align="center"></el-table-column>-->
<!--                <el-table-column label="操作" align="center">-->
<!--                    <template slot-scope="scope">-->
<!--                        <el-button type="primary" size="mini" @click="handleUpdate(scope.row)">编辑</el-button>-->
<!--                        <el-button size="mini" type="danger" @click="handleDelete(scope.row)">删除</el-button>-->
<!--                    </template>-->
<!--                </el-table-column>-->
<!--            </el-table>-->
<!--            <div class="pagination-container">-->
<!--                <el-pagination-->
<!--                        class="pagiantion"-->
<!--                        @current-change="handleCurrentChange"-->
<!--                        :current-page="pagination.currentPage"-->
<!--                        :page-size="pagination.pageSize"-->
<!--                        layout="total, prev, pager, next, jumper"-->
<!--                        :total="pagination.total">-->
<!--                </el-pagination>-->
<!--            </div>-->

<!--            &lt;!&ndash; 新增标签弹层 &ndash;&gt;-->
<!--            <div class="add-form">-->
<!--                <el-dialog title="新增会员" :visible.sync="dialogFormVisible">-->
<!--                    <template>-->
<!--                        <el-tabs v-model="activeName" type="card">-->
<!--                            <el-tab-pane label="基本信息" name="first">-->
<!--                                <el-form label-position="right" label-width="100px">-->
<!--                                    <el-row>-->
<!--                                        <el-col :span="12">-->
<!--                                            <el-form-item label="姓名">-->
<!--                                                <el-input v-model="formData.name"/>-->
<!--                                            </el-form-item>-->
<!--                                        </el-col>-->
<!--                                        <el-col :span="12">-->
<!--                                            <el-form-item label="手机号码">-->
<!--                                                <el-input v-model="formData.phoneNumber"/>-->
<!--                                            </el-form-item>-->
<!--                                        </el-col>-->
<!--                                    </el-row>-->
<!--                                    <el-row>-->
<!--                                        <el-col :span="12">-->
<!--                                            <el-form-item label="性别">-->
<!--                                                <el-select v-model="formData.sex">-->
<!--                                                    <el-option label="不限" value="0"></el-option>-->
<!--                                                    <el-option label="男" value="1"></el-option>-->
<!--                                                    <el-option label="女" value="2"></el-option>-->
<!--                                                </el-select>-->
<!--                                            </el-form-item>-->
<!--                                        </el-col>-->
<!--                                        <el-col :span="12">-->
<!--                                            <el-form-item label="出生日期">-->
<!--                                                <template>-->
<!--                                                    <div class="block">-->
<!--                                                        <el-date-picker-->
<!--                                                                v-model="formData.birthday"-->
<!--                                                                type="date"-->
<!--                                                                placeholder="选择日期">-->
<!--                                                        </el-date-picker>-->
<!--                                                    </div>-->
<!--                                                </template>-->
<!--                                            </el-form-item>-->
<!--                                        </el-col>-->
<!--                                    </el-row>-->
<!--                                    <el-row>-->

<!--                                        <el-col :span="12">-->
<!--&lt;!&ndash;                                            <el-form-item label="健康管理师">&ndash;&gt;-->
<!--&lt;!&ndash;                                                <el-select v-model="formData.health">&ndash;&gt;-->
<!--&lt;!&ndash;                                                    <el-option label="uzi" value="uzi"></el-option>&ndash;&gt;-->
<!--&lt;!&ndash;                                                    <el-option label="mlxg" value="mlxg"></el-option>&ndash;&gt;-->
<!--&lt;!&ndash;                                                    <el-option label="wuwukai" value="wuwukai"></el-option>&ndash;&gt;-->
<!--&lt;!&ndash;                                                </el-select>&ndash;&gt;-->
<!--&lt;!&ndash;                                            </el-form-item>&ndash;&gt;-->
<!--                                            <el-form-item label="健康管理师">-->
<!--                                                <el-select v-model="formData.health" placeholder="请选择健康管理师">-->
<!--                                                    <el-option-->
<!--                                                            v-for="item in menuData"-->
<!--                                                            :key="item.id"-->
<!--                                                            :label="item.username"-->
<!--                                                            :value="item.username">-->
<!--                                                    </el-option>-->
<!--                                                </el-select>-->
<!--                                            </el-form-item>-->
<!--                                        </el-col>-->

<!--                                        <el-col :span="12">-->
<!--                                            <el-form-item label="身份证号码">-->
<!--                                                <el-input v-model="formData.idCard" ></el-input>-->
<!--                                            </el-form-item>-->
<!--                                        </el-col>-->
<!--                                    </el-row>-->
<!--                                    <el-row>-->
<!--                                        <el-col :span="12">-->
<!--                                            <el-form-item label="档案号">-->
<!--                                                <el-input v-model="formData.fileNumber" ></el-input>-->
<!--                                            </el-form-item>-->
<!--                                        </el-col>-->
<!--                                    </el-row>-->
<!--                                    <el-row>-->
<!--                                        <el-col :span="24">-->
<!--                                            <el-form-item label="说明">-->
<!--                                                <el-input v-model="formData.remark" type="textarea"></el-input>-->
<!--                                            </el-form-item>-->
<!--                                        </el-col>-->
<!--                                    </el-row>-->
<!--                                </el-form>-->
<!--                            </el-tab-pane>-->

<!--                        </el-tabs>-->
<!--                    </template>-->
<!--                    <div slot="footer" class="dialog-footer">-->
<!--                        <el-button @click="dialogFormVisible = false">取消</el-button>-->
<!--                        <el-button type="primary" @click="handleAdd()">确定</el-button>-->
<!--                    </div>-->
<!--                </el-dialog>-->
<!--            </div>-->

<!--            &lt;!&ndash; 编辑标签弹层 &ndash;&gt;-->
<!--            <div class="add-form">-->
<!--                <el-dialog title="编辑会员" :visible.sync="dialogFormVisible4Edit">-->
<!--                    <template>-->
<!--                        <el-tabs v-model="activeName" type="card">-->
<!--                            <el-tab-pane label="基本信息" name="first">-->
<!--                                <el-form label-position="right" label-width="100px">-->
<!--                                    <el-row>-->
<!--                                        <el-col :span="12">-->
<!--                                            <el-form-item label="姓名">-->
<!--                                                <el-input v-model="formData.name"/>-->
<!--                                            </el-form-item>-->
<!--                                        </el-col>-->
<!--                                        <el-col :span="12">-->
<!--                                            <el-form-item label="手机号码">-->
<!--                                                <el-input v-model="formData.phoneNumber"/>-->
<!--                                            </el-form-item>-->
<!--                                        </el-col>-->
<!--                                    </el-row>-->
<!--                                    <el-row>-->
<!--                                        <el-col :span="12">-->
<!--                                            <el-form-item label="性别">-->
<!--                                                <el-select v-model="formData.sex">-->
<!--                                                    <el-option label="不限" value="0"></el-option>-->
<!--                                                    <el-option label="男" value="1"></el-option>-->
<!--                                                    <el-option label="女" value="2"></el-option>-->
<!--                                                </el-select>-->
<!--                                            </el-form-item>-->
<!--                                        </el-col>-->
<!--                                        <el-col :span="12">-->
<!--                                            <el-form-item label="出生日期">-->
<!--                                                <template>-->
<!--                                                    <div class="block">-->
<!--                                                        <el-date-picker-->
<!--                                                                v-model="formData.birthday"-->
<!--                                                                type="date"-->
<!--                                                                placeholder="选择日期">-->
<!--                                                        </el-date-picker>-->
<!--                                                    </div>-->
<!--                                                </template>-->
<!--                                            </el-form-item>-->
<!--                                        </el-col>-->
<!--                                    </el-row>-->
<!--                                    <el-row>-->

<!--                                        <el-col :span="12">-->
<!--&lt;!&ndash;                                            <el-form-item label="健康管理师">&ndash;&gt;-->
<!--&lt;!&ndash;                                                <el-select v-model="formData.health">&ndash;&gt;-->
<!--&lt;!&ndash;                                                    <el-option label="uzi" value="uzi"></el-option>&ndash;&gt;-->
<!--&lt;!&ndash;                                                    <el-option label="mlxg" value="mlxg"></el-option>&ndash;&gt;-->
<!--&lt;!&ndash;                                                    <el-option label="wuwukai" value="wuwukai"></el-option>&ndash;&gt;-->
<!--&lt;!&ndash;                                                </el-select>&ndash;&gt;-->
<!--&lt;!&ndash;                                            </el-form-item>&ndash;&gt;-->
<!--                                            <el-form-item label="健康管理师">-->
<!--                                                <el-select v-model="formData.health" placeholder="请选择健康管理师">-->
<!--                                                    <el-option-->
<!--                                                            v-for="item in menuData"-->
<!--                                                            :key="item.id"-->
<!--                                                            :label="item.username"-->
<!--                                                            :value="item.username">-->
<!--                                                    </el-option>-->
<!--                                                </el-select>-->
<!--                                            </el-form-item>-->
<!--                                        </el-col>-->


<!--                                        <el-col :span="12">-->
<!--                                            <el-form-item label="身份证号码">-->
<!--                                                <el-input v-model="formData.idCard" ></el-input>-->
<!--                                            </el-form-item>-->
<!--                                        </el-col>-->
<!--                                    </el-row>-->
<!--                                    <el-row>-->
<!--                                        <el-col :span="12">-->
<!--                                            <el-form-item label="档案号">-->
<!--                                                <el-input v-model="formData.fileNumber" ></el-input>-->
<!--                                            </el-form-item>-->
<!--                                        </el-col>-->
<!--                                    </el-row>-->
<!--                                    <el-row>-->
<!--                                        <el-col :span="24">-->
<!--                                            <el-form-item label="说明">-->
<!--                                                <el-input v-model="formData.remark" type="textarea"></el-input>-->
<!--                                            </el-form-item>-->
<!--                                        </el-col>-->
<!--                                    </el-row>-->
<!--                                </el-form>-->
<!--                            </el-tab-pane>-->

<!--                        </el-tabs>-->
<!--                    </template>-->
<!--                    <div slot="footer" class="dialog-footer">-->
<!--                        <el-button @click="dialogFormVisible4Edit = false">取消</el-button>-->
<!--                        <el-button type="primary" @click="handleEdit()">确定</el-button>-->
<!--                    </div>-->
<!--                </el-dialog>-->
<!--            </div>-->
<!--        </div>-->
<!--    </div>-->
<!--</div>-->
<!--</body>-->
<!--&lt;!&ndash; 引入组件库 &ndash;&gt;-->
<!--<script src="../js/vue.js"></script>-->
<!--<script src="../plugins/elementui/index.js"></script>-->
<!--<script type="text/javascript" src="../js/jquery.min.js"></script>-->
<!--<script src="../js/axios-0.18.0.js"></script>-->
<!--<script>-->
<!--    var vue = new Vue({-->
<!--        el: '#app',-->
<!--        data:{-->
<!--            pagination: {//分页相关模型数据-->
<!--                currentPage: 1,//当前页码-->
<!--                pageSize:10,//每页显示的记录数-->
<!--                total:0,//总记录数-->
<!--                queryString:null//查询条件-->

<!--            },-->
<!--            dataList: [],//当前页要展示的分页列表数据-->
<!--            formData: {},//表单数据-->
<!--            dialogFormVisible: false,//增加表单是否可见-->
<!--            dialogFormVisible4Edit:false,//编辑表单是否可见-->
<!--            menuData:[],-->
<!--            activeName:"first",-->
<!--            rules: {//校验规则-->
<!--                code: [{ required: true, message: '项目编码为必填项', trigger: 'blur' }],-->
<!--                name: [{ required: true, message: '项目名称为必填项', trigger: 'blur' }]-->
<!--            },-->
<!--            selectedId: [],-->
<!--            // orderDate: []//开始和结束的时间-->
<!--        },-->
<!--        //钩子函数，VUE对象初始化完成后自动执行-->
<!--        created() {-->
<!--            this.findPage();-->
<!--        },-->
<!--        methods: {-->
<!--            exportExcel() {-->
<!--                window.location.href = "/member/exportMember.do?ids="+this.selectedId;-->
<!--            },-->
<!--            handleSelectionChange(val) {-->
<!--                this.selectedId = [] ;-->

<!--                for (let i = 0; i < val.length; i++) {-->
<!--                    this.selectedId.push(val[i].id);-->
<!--                }-->
<!--            },-->
<!--            showMessage(r){-->
<!--                if(r == 'Error: Request failed with status code 403'){-->
<!--                    //权限不足-->
<!--                    this.$message.error('无访问权限');-->
<!--                    return;-->
<!--                }else{-->
<!--                    this.$message.error('未知错误');-->
<!--                    return;-->
<!--                }-->
<!--            },-->
<!--            //分页查询-->
<!--            findPage() {-->
<!--                let params={-->
<!--                    currentPage:this.pagination.currentPage,-->
<!--                    pageSize: this.pagination.pageSize,-->
<!--                    queryString: this.pagination.queryString,-->
<!--                    // orderDate: this.orderDate-->
<!--                };-->
<!--                axios.post("/member/findPage.do",params).then((resp)=>{-->
<!--                    if(resp.data.flag){-->
<!--                        this.dataList=resp.data.data.rows;-->
<!--                        this.pagination.total=resp.data.data.total;-->
<!--                    }else{-->
<!--                        this.$message.error(resp.data.message);-->
<!--                    }-->
<!--                });-->
<!--            },-->
<!--            // 重置表单-->
<!--            resetForm() {-->
<!--                this.formData = {};-->
<!--            },-->
<!--            // 弹出添加窗口-->
<!--            handleCreate() {-->
<!--                this.resetForm();-->
<!--                this.dialogFormVisible = true;-->

<!--                axios.get("/user/findHealth.do").then(resp=>{-->
<!--                    this.menuData=resp.data.data;-->
<!--                })-->

<!--            },-->
<!--            handleUpdate(row) {-->
<!--                //查询数据详情-->
<!--                axios.get("/member/findById.do?id="+row.id).then(response => {-->
<!--                    if (response.data.flag) {-->
<!--                        //设置数据-->
<!--                        this.formData = response.data.data;-->
<!--                        //显示编辑框-->
<!--                        this.dialogFormVisible4Edit = true;-->
<!--                    } else {-->
<!--                        this.$message.error(response.data.message);-->
<!--                    }-->
<!--                });-->
<!--                axios.get("/user/findHealth.do").then(resp=>{-->
<!--                    this.menuData=resp.data.data;-->
<!--                })-->
<!--            },-->
<!--            handleEdit() {-->
<!--                //表单校验通过 , 发送异步请求-->

<!--                axios.post("/member/edit.do",this.formData).then(response => {-->
<!--                    //隐藏编辑窗口-->
<!--                    this.dialogFormVisible4Edit = false;-->
<!--                    if (response.data.flag) {-->
<!--                        this.$message.success(response.data.message);-->
<!--                    } else {-->
<!--                        this.$message.error(response.data.message);-->
<!--                    }-->
<!--                }).finally(() => {-->
<!--                    //刷新页面-->
<!--                    this.findPage();-->
<!--                })-->
<!--            },-->
<!--            //添加-->
<!--            handleAdd() {-->
<!--                axios.post("/member/add.do",this.formData).then(response => {-->
<!--                    this.dialogFormVisible = false;-->
<!--                    if (response.data.flag) {-->
<!--                        this.$message.success(response.data.message);-->
<!--                    } else {-->
<!--                        this.$message.error(response.data.message);-->
<!--                    }-->
<!--                }).finally(() => {-->
<!--                    this.findPage();-->
<!--                });-->
<!--            },-->
<!--            handleDelete(row) {-->
<!--                this.$confirm("您确定要删除此记录吗?", "提示", {-->
<!--                    confirmButtonText: '确定',-->
<!--                    cancelButtonText: '取消',-->
<!--                    type: 'warning'-->
<!--                }).then(() => {-->
<!--                    //用户点击确定 , 发送异步请求-->
<!--                    //发送异步请求-->
<!--                    axios.delete("/member/delete.do?id="+row.id).then(response => {-->
<!--                        if (response.data.flag) {-->
<!--                            this.$message.success(response.data.message);-->
<!--                            this.findPage();-->
<!--                        } else {-->
<!--                            this.$message.error(response.data.message);-->
<!--                        }-->
<!--                    }).catch(error=>{-->
<!--                        this.showMessage(error);-->
<!--                    });-->
<!--                })-->
<!--            },-->


<!--        }-->
<!--    })-->
<!--</script>-->
<!--</html>-->